<template>
  <div>
    <div id="editor"></div>
    <button @click="getContent">获取内容</button>
    <select v-model="selectedType">
      <option value="">请选择类型</option>
      <option v-for="(value, key) in types" :value="key">{{ value }}</option>
    </select>
    <button v-if="selectedType" @click="getFontInContent">test</button>
  </div>
</template>

<script>
import WangEditor from 'wangeditor'
import axios from 'axios'
export default {
  data() {
    return {
      editor: null,
      content: '',
      title:'',
      types: {
        0: '计算机',
        1: '科学',
        2: '运动'
      },
      selectedType: ''
    }
  },
  mounted() {
    const editor = new WangEditor('#editor')
    editor.create()
    this.editor = editor
  },
  methods: {
    getContent() {
      const content = this.editor.txt.html()
      console.log(content)
    },
    getFontInContent() {
      if (!this.selectedType) {
        return  // 如果没有选择类型，则不执行
      }
      const content = this.editor.txt.html()
      const parser = new DOMParser()
      const doc = parser.parseFromString(content, "text/html")
      const nodes = doc.body.childNodes
      for (let i = 0; i < nodes.length; i++) {
        if (/^H[1-6]$/.test(nodes[i].nodeName)) {
          this.title = nodes[i].innerHTML // 使用 innerHTML 属性获取 HTML 内容
          console.log(this.title)
          console.log(content)
        }
      }
      let obj = new FormData()
      obj.append('content', content)
      obj.append('title', String(this.title))
      obj.append('type', this.selectedType)  // 将 selectedType 属性的值添加到 FormData 对象中
      axios.post("/project/content/getFontInContent", obj)
    }
  }
}
</script>

<style scoped>

</style>
